<template>
  <div class="basic">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>技能测试(90) <span style="color: #fff">1</span></span>
          <!-- <el-button
            type="primary"
            style="float: right; margin-left: 16px"
            @click="winopen"
            >导出平均分二</el-button
          >
          <el-button type="primary" style="float: right" @click="winopen"
            >导出平均分一</el-button
          >  -->
        </div>
      </template>
      <el-table
        :data="tableData.value"
        v-if="tableData.value?.length > 0"
        border
        style="width: 100%; height: calc(100vh - 250px)"
      >
        <el-table-column prop="match_sort" label="比赛序号" width="100" />
        <el-table-column prop="edu_sort" label="教育厅序号" width="100" />
        <el-table-column prop="school" label="学校名称" width="220">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableData.value[0]?.raters"
          :key="index"
        >
          <template #header>
            {{ item.rater_name }}
          </template>
          <template #default="scope">
            <input
              :id="`${scope.$index}-${index}`"
              @input="clearInput(scope.row.raters[index])"
              type="number"
              @wheel.native.prevent
              @keydown.native.tab="tabfun(scope.$index, index, $event)"
              @keydown.native.up.prevent
              @keydown.native.down.prevent
              class="numinput"
              v-model="scope.row.raters[index].score"
              :min="0"
              autocomplete="false"
              :controls="false"
              :max="90"
            />
          </template>
        </el-table-column>

        <el-table-column label="平均分" sortable>
          <template #default="scope">
            {{ averagetwo(scope.row.raters) }}
          </template>
        </el-table-column>
      </el-table>
      <el-button
        class="mt-4"
        type="primary"
        plain
        style="margin-top: 30px; width: 100%"
        @click="submit"
        >保存</el-button
      >
    </el-card>
  </div>
</template>

<script setup lang="ts">
import synthesizedialog from "../../component/synthesizedialog/synthesizedialog.vue";
import { reactive, ref } from "vue";
import {
  match_list,
  raterList,
  achievement,
  save_team_fraction,
} from "../../api/api";
let tableData: any = reactive({ value: [] });

const getlist = () => {
  tableData.value = [];
  match_list({ link_id: 5 }).then((res: any) => {
    // res.data.forEach((item:any)=>{
    //   item.raters.forEach((itema:any)=>{
    //     itema.show = true
    //   })
    // })
    tableData.value = res.data;
  });
};

getlist();
let dialogVisible = ref(false);

const averageone = (arr: any) => {
  let total = 0;
  arr.forEach((item: any, index: number) => {
    total = total + (item.score ? item.score : 0) * 10000;
  });
  total = total / 10000;
  return total / arr.length ? (total / arr.length).toFixed(2) : "-";
};

const averagetwo = (arr: any) => {
  let arrnum: any = [];
  arr.forEach((item: any, index: number) => {
    arrnum.push(item.score ? item.score : 0);
  });

  if (arrnum.length < 3) {
    throw new Error(
      "Array must have at least three elements to remove min and max."
    );
  }

  // 先排序数组
  arrnum.sort((a, b) => a - b);

  // 去掉最小值和最大值
  const trimmedArr = arrnum.slice(1, -1);

  // 计算剩余元素的总和
  let sum = trimmedArr.reduce((total, num) => total + num, 0);

  // 返回平均值
  return sum / trimmedArr.length ? (sum / trimmedArr.length).toFixed(2) : "-";
};

let tabdata: any = reactive({ value: [] });

const winopen = () => {
  achievement({ link_id: 5 }).then((res: any) => {
    const blob = new Blob([res]);
    const linkNode = document.createElement("a");
    linkNode.download = "模块一-技能测试.doc";
    linkNode.style.display = "none";
    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
    document.body.appendChild(linkNode);
    linkNode.click(); //模拟在按钮上的一次鼠标单击
    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
    document.body.removeChild(linkNode);
  });
};

const clearInput = (e: any) => {
  if (e) {
    if (e.score == undefined || e.score == null || e.score == "") {
      return;
    }
    // e.score = Math.floor(e.score * 100) / 100;
    if (e.score > 90) {
      e.score = 90;
    }
    if (e.score < 0) {
      e.score = 0;
    }
  }
};
const submit = () => {
  console.log(tableData.value);

  let score: any = [];
  tableData.value.forEach((item1: any, index: number) => {
    item1.raters.forEach((item2: any) => {
      let obj = {
        rater_id: item2.rater_id,
        fraction: item2.score ? item2.score - 0 : 0,
        team_id: item1.id,
      };
      score.push(obj);
    });
  });
  let data = { link_id: 5, data: score };

  save_team_fraction(data).then((res: any) => {
    getlist();
    if (res.code == 200) {
      ElMessage.success("保存成功");
    } else {
      ElMessage.warning("保存失败");
    }
  });
};

const tabfun = (index1: any, index2: any, event: any) => {
  if (index1 != undefined && index2 != undefined) {
    console.log(index1, index2);
    event.preventDefault();
    let id1 = index1 + 1;
    let id2 = index2 <= 0 ? 0 : index2;
    if (id1 >= tableData.value.length) {
      id1 = 0;
    }
    let dom: any = document.getElementById(`${id1}-${id2}`);
    dom.focus();
  }
};
</script>

<style lang="less" scoped>
.basic {
  // background: white;
  // padding: 30px;
  .el-card {
    min-height: calc(100vh - 104px);
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    input::-webkit-outer-spin-button {
      -webkit-appearance: none !important;
    }

    input[type="number"] {
      width: 100%;
      height: 35px;
      background: #ecf5ff;
      -moz-appearance: textfield;
    }
  }
}
</style>
